<template>
  <slide-up :show="show" class="slide-up-adjust">
    <div class="time-select">
      <div class="title">
        <div class="switch-wrapper">
          <switches 
            :switches="switches"  
            :activeSwitchIndex="activeSwitchIndex"
            @click="updateSwitchIndex"
            >
          </switches>
        </div>
        <div class="time-select-area">
          <div class="picker-wrapper">
            <van-datetime-picker
              v-show="activeSwitchIndex == 0"
              :show-toolbar="false"
              :visible-item-count="3"
              v-model="currentStartDate"
              type="datetime"
              :formatter="formatter"
              @change="handleChange"
              :max-date="maxDate"
            />
            <van-datetime-picker
              v-show="activeSwitchIndex == 1"
              :show-toolbar="false"
              :visible-item-count="3"
              v-model="currentEndDate"
              type="datetime"
              :formatter="formatter"
              @change="handleChange"
              :max-date="maxDate"
              :min-date="minDate"
            />
          </div>
        </div>
        <div class="btns border-bottom">
          <div class="button-unselected btn" @click="chooseToday">现在</div>
          <div class="button-unselected btn" @click="hideTimePicker">取消</div>
          <div class="button-selected btn" @click="updateSelectedTime">确认</div>
        </div>
        <recent-days @click="updateRecentDay"></recent-days>
      </div>
    </div>
  </slide-up>
</template>

<script>
import SlideUp from '@/components/slide-up/slide-up'
import Switches from '@/components/base/switches/switches'
import RecentDays from '@/pages/my-account/components/recent-days'
export default {
  components: {
    SlideUp,
    Switches,
    RecentDays
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      switches: [
        {
          id: 1,
          name: '开始时间'
        },
        {
          id: 2,
          name: '结束时间'
        },
      ],
      activeSwitchIndex: 0,
      currentStartDate: new Date(2019,0,1),
      currentEndDate: new Date(),
      maxDate: new Date(),
      minDate: this.currentStartDate
    }
  },
  methods: {
    chooseLottery(id, index) {
      this.$emit('click', id, index)
    },
    updateSwitchIndex(index) {
      this.activeSwitchIndex = index
    },
    hideTimePicker() {
      this.$emit('hide')
    },
    updateRecentDay(obj) {
      console.log(obj)
      this.$emit('pass-data', obj)
    },
    updateSelectedTime() {
      this.$emit('pass-msg', this.currentStartTimeStr, this.currentEndTimeStr)
    },
    chooseToday() {
      this.$emit('now', new Date())
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } 
      return value;
    },
    handleChange(picker) {
      let values = picker.getValues()
    },
    
  },
  computed: {
    currentStartTimeStr() {
      return this.currentStartDate.getTime()
    },
    currentEndTimeStr() {
      return this.currentEndDate.getTime()
    }
  },
  watch: {
    currentStartDate(newVal, oldVal) {
      this.minDate = newVal
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
    .slide-up-adjust 
      padding 0 !important
    .time-select 
      color $color-theme-dark
      .title 
        .switch-wrapper 
          width 160px
          margin 0 auto
          margin-top 10px 
        .switch-wrapper >>> .switches
          height 30px
          .switch-item 
            height 30px 
            line-height 30px
        .time-select-area 
          margin-top 10px
          .picker-wrapper 
            box-sizing border-box 
            padding 0 10px
        .btns 
          height 60px 
          display flex 
          align-items center 
          justify-content center
          font-size 0
          .btn 
            min-width 100px
            height 36px 
            font-size 14px 
            margin-right 10px
            display flex 
            align-items center 
            justify-content center
            vertical-align top
            box-sizing border-box
</style>